<template>
	<div class="indexContainer">
		<el-card class="select-con">
			<el-row>
				<el-col :xs="24" :sm="6" class="mr20 mb20">
					<el-select v-model="selectGame" placeholder="选择游戏">
						<el-option v-for="item in gameList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-col>
				<el-col :xs="24" :sm="6" class="mr20 mb20">
					<el-select v-model="selectStatus" placeholder="选择状态">
						<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-col>
				<el-col :xs="24" :sm="6" class="mr20 mb20">
					<div class="ac-btns">
						<el-button  @click="clearSelect()">清空</el-button>
						<el-button type="primary" @click="getActivity()">确认</el-button>
					</div>
				</el-col>
			</el-row>
		</el-card>


		<div class="index-con">
		
			<el-table :data="activityList" class="table-con">
				<el-table-column fixed prop="title" label="活动标题" width="200" />
				<el-table-column prop="beginTime" label="活动开始时间" width="180" />
				<el-table-column prop="endTime" label="活动结束时间" width="180" />
				<el-table-column prop="applyBeginTime" label="申请开始时间" width="180" />
				<el-table-column prop="applyEndTime" label="申请结束时间" width="200" />
				<el-table-column label="状态" width="300">
					<template v-slot="scope">
						<div class="btns">
							<div class="btn" @click="toActivity(scope.row)" v-if="scope.row.status === 1">招募中</div>
							<div class="btn no" v-else>已结束</div>
							<div class="btn" @click="toActivity(scope.row)">活动详情</div>

						</div>
					</template>

				</el-table-column>
			</el-table>

			<div class="pagination-block">
				<el-pagination :hide-on-single-page="isSinglePage" v-model:current-page="pageNo"
					v-model:page-size="pageSize" :small="small" :disabled="disabled" :background="background"
					layout="prev, pager, next, jumper" :total="totalPage" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>

		</div>
	</div>
</template>

<script setup lang="ts">
import router from '/@/router/index';
import { ref, onMounted } from 'vue'
import { useActivityApi } from '/@/api/activity';

const activityList = ref([]);
const pageNo = ref(1);
const pageSize = ref(5)

const small = ref(false)
const background = ref(false)
const totalPage = ref(10);
// const isSinglePage = computed(() => {
// 	return totalPage.value<=1
// })
const isSinglePage = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}

const selectGame = ref('')
const selectStatus = ref('')
let canFilter=true;
async function getActivity() {
	if(!canFilter){
		return false;
	}
	canFilter=false;
	const res = await useActivityApi().actList({
		pageNo: pageNo.value,
		pageSize: pageSize.value,
		gameId: selectGame.value,
		status: selectStatus.value,
	});
	canFilter=true;
	if (res) {
		activityList.value = [...res.data.list];
	}

}


function toActivity(data) {
	router.push({ path: '/activity/all/detail', query: { id: data.id } })
}
const gameList = ref([])
async function getGameList(){
	const res = await useActivityApi().getGameList({});
	if(res){
		gameList.value=res.data
	}
}
getGameList();
const statusList = ref([
	{	value: '1', label: '进行中' },
	{ value: '2', label: '已结束' },
])
function clearSelect() {
	selectGame.value = '';
	selectStatus.value = '';
	getActivity();
}

onMounted(() => {
	getActivity();
})


</script>
<style scoped lang="scss">
.indexContainer {
	width: 100%;
}
.select-con{
	width:96%;
	margin:20px auto 20px;
}
.table-con {
	width: 96%;
	margin: auto;
	height: calc(100% - 160px);

	.btns {
		height: 35px;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;

		.btn {
			width: 72px;
			height: 35px;
			line-height: 35px;
			border-radius: 2px;
			display: flex;
			// color: #ffffff;
			color: rgb(233, 157, 66);
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin-right: 15px;
			cursor: pointer;
			&.no {
				background:none;
				color: rgb(187, 187, 187);
			}

			&+.btn {
				color: #ffffff;
				background: rgb(255, 191, 51);
			}
		}
	}
}

.pagination-block {
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.index-con {
	margin: 10px auto 0;
	padding-bottom: 50px;
	background: rgb(245, 245, 245);
}




</style>